<template>
  <div class="line-wrapper">
    <div class="line-icon">
        <span class="iconfont">{{icon}}</span>
    </div>
    <div class="line-title">
        <span>{{title}}</span>
    </div>
    <div class="line-content">
        <span>{{content}}</span>
        <van-icon name="arrow" size="10px" class="van" color="#ccc" v-if="showArrow" />
        <van-switch
            v-if="showSwitch"
            :checked="checked"
            active-color="#07c160"
            inactive-color="#ffffff"
            size="24px"
            @change="onChange"
            class="switch"
        />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    showSwitch: {
      type: Boolean,
      default: false
    },
    showArrow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      checked: true
    }
  },
  methods: {
    onChange () {
      this.checked = !this.checked
    }
  }
}
</script>

<style lang="scss" scoped>
.line-wrapper {
    color: #898989;
    display: flex;
    margin-bottom: 5px;
    .line-icon {
        flex: 1;
        padding: 5px;
        padding-left: 15px;
    }
    .line-title {
        flex: 6;
        padding: 5px;

        span {
            font-size: 16px;
            text-align: center;
            font-weight: 700;
        }
    }
    .line-content {
        flex: 4;
        padding: 5px;

        font-size: 16px;
        text-align: center;
        position: relative;
        span {
            position: absolute;
            right: 25px;
            top: 10px;
            color: #ccc;
        }
        .van {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .switch {
            margin-right: -40px;
        }
    }
}
</style>
